<template>
  <div class="scan_main">
    <head-top head-title="扫码送票" go-back="true"></head-top>
    <div class="scan_body">
      <!--搜索部分-->
      <div class="search_div">
        <input placeholder="请输入业主的手机号或姓名" type="text" @keyup.enter="searchBtn" v-model.trim="search">
        <button @click="searchBtn">搜索</button>
      </div>
      <!--展示搜索结果-->
      <ul class="information" v-show="listShow">
        <li>
          <div class="info_li" v-for="(ritem,rindex) in returnData" :key="rindex"
               @click="referName(ritem.house_id, ritem.name)">
            <span>{{ritem.name}}</span>
          </div>
        </li>
      </ul>
      <!--确定搜索结果-->
      <ul class="define">
        <li v-for="item in referDate">{{item}}</li>
      </ul>
      <!--扫码部分-->
      <div class="scan_div">
        <p>
          <span>操作流程简介：</span>
          点击开始扫描，将二维码对准在扫描框里扫描，扫描成功后会显示扫描结果，
          然后点击立即绑定就可以了。
        </p>
        <div class="scan_part">
          <div class="scan_box">
            <button @click="sys_click()"></button>
          </div>
          <p><span>扫描结果：{{resultText}}</span></p>
        </div>
      </div>
      <!--确定部分-->
      <div class="refer_div">
        <!--<ul>
          <li>
            <label class="checkbox-label" v-for="(label,index2) in lesson">
              <input v-model="selectArr" :value="index2" :checked="index2 == 0" type="radio"
                     class="checkbox-input event-allChooseHouse" @click="selectOne(label.id)">
              <span class="checkbox-core"></span>
              <span class="text">{{label.value}}</span>
            </label>
          </li>
        </ul>-->
        <div class="bind_btn" @click="bindBtn">
          <span style="color: #fff">立即绑定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import wx from 'weixin-js-sdk'
  // import $ from 'jquery'
  import { getConfig } from '../../api/homeLogin'
  import { searchScan, bindPost } from '../../api/my'
  import { Toast } from 'mint-ui'

  export default {
    name: 'Scan',
    data () {
      return {
        search: '', // 搜索
        listShow: false, // 搜索是否展示列表
        selectArr: [],
        lesson: [
          {
            id: 2, value: '已送达'
          },
          {
            id: 3, value: '已回收'
          }
        ],
        returnData: [], // 搜索的数据
        ids: '', // 存放选择的id
        referDate: [], // 存放选择的房屋信息
        idArr: [],
        resultText: '', // 扫描的结果
        oneId: '' // 选项id
      }
    },
    methods: {
      // 搜索显示的数据
      searchBtn () {
        this.listShow = false
        searchScan(this.search).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.returnData = res.data
            this.listShow = true
            // console.log(this.returnData)
          }
        })
      },
      // 确定搜索后的数据
      referName (id, name) {
        this.idArr.push(id)
        this.referDate.push(name)
        this.listShow = false
        this.ids = this.idArr.toString() // 把存入数组里的id转为字符串
        // console.log(this.ids)
      },
      // 二维码扫一扫
      sys_click () {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              timestamp: res.data.timestamp,
              nonceStr: res.data.nonceStr,
              signature: res.data.signature,
              jsApiList: ['checkJsApi', 'scanQRCode']
            })
            var th = this
            wx.ready(() => {
              wx.checkJsApi({
                jsApiList: ['scanQRCode'],
                success: function (res) {
                  console.log(res)
                }
              })
              wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                  // var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
                  // alert('扫描结果：' + result)
                  Toast({
                    message: res.resultStr,
                    position: 'middle',
                    duration: 2000
                  })
                  th.resultText = res.resultStr
                }
              })
            })
          }
        })
      },
      selectOne (id) {
        // console.log(id)
        this.oneId = id
      },
      // 提交绑定
      bindBtn () {
        bindPost(this.resultText, this.ids, this.oneId).then(res => {
          // console.log(res)
          // alert(res)
          if (res.code === 200) {
            Toast({
              message: res.data + ',请稍后',
              position: 'middle',
              duration: 3000
            })
            this.oneRefresh() // 1秒后刷新页面
          }
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
          }
        })
      },
      // 三秒后跳转页面
      oneRefresh () {
        const TIME_COUNT = 1
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              this.$router.go(0) // 刷新页面
            }
          }, 1000)
        }
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .scan_main {
    padding-top: 40px;
    .scan_body {
      width: 100%;
      position: relative;
      .search_div {
        padding: 10px;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;
        input {
          width: 65%;
          height: 40px;
          outline: none;
          padding: 0 10px;
        }
        button {
          height: 40px;
          padding: 0 25px;
          font-size: 15px;
          background: #2585d0;
          color: #ffffff;
        }
      }
      .information {
        width: 100%;
        background: #f2f2f2;
        position: absolute;
        top: 55px;
        z-index: 2;
        li {
          padding: 10px;
          .info_li {
            border-bottom: 1px solid #f2f2f2;
            background: #ffffff;
            line-height: 40px;
            span {
              font-size: 15px;
            }
          }
          .info_li:last-child {
            border-bottom: none;
          }
        }
      }
      .define {
        border-bottom: 10px solid #f2f2f2;
        li {
          padding: 10px;
          font-size: 14px;
          color: #2585d0;
          border-bottom: 1px solid #f2f2f2;
        }
        li:last-child {
          border-bottom: none;
        }
      }
      .scan_div {
        padding: 10px;
        p {
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          span {
            color: #2585d0;
          }
        }
        .scan_part {
          .scan_box {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
            button {
              background: url("../../assets/saomiaokuang@2x.png");
              width: 120px;
              height: 120px;
              background-size: 100%;
            }
          }
          p {
            text-align: center;
            margin-top: 10px;
            color: #292929;
            font-size: 15px;
            span {
              color: #292929;
              font-size: 15px;
            }
          }
        }
      }
      .refer_div {
        width: 100%;
        height: 60px;
        background: #ffffff;
        position: fixed;
        bottom: 0;
        z-index: 2;
        border-top: 1px solid #f2f2f2;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: space-between;
        ul {
          width: 50%;
          li {
            display: flex;
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            .checkbox-label {
              padding: 0 0.1rem;
              display: flex;
              align-items: center;
            }
            .checkbox-label .checkbox-input {
              display: none;
              opacity: 0;
            }
            .checkbox-label .checkbox-core {
              display: inline-block;
              border-radius: 100%;
              /*background: #e6e7e9;*/
              border: 1px solid #c2c2c2;
              position: relative;
              width: 20px;
              height: 20px;
              vertical-align: middle;
            }
            .checkbox-core:after {
              border: 2px solid transparent;
              border-left: 0;
              border-top: 0;
              content: " ";
              top: 1px;
              left: 7px;
              position: absolute;
              width: 6px;
              height: 12px;
              -webkit-transform: rotate(45deg) scale(0);
              transform: rotate(45deg) scale(0);
              -webkit-transition: -webkit-transform .2s;
              transition: -webkit-transform .2s;
              transition: transform .2s;
              transition: transform .2s, -webkit-transform .2s;
            }
            .checkbox-input:checked + .checkbox-core {
              background-color: #26a2ff;
              border-color: #26a2ff;
            }
            .checkbox-input:checked + .checkbox-core:after {
              border-color: #fff;
              -webkit-transform: rotate(45deg) scale(1);
              transform: rotate(45deg) scale(1);
            }
            .text {
              font-size: 15px;
              margin-left: 10px;
            }
          }
        }
        .bind_btn {
          width: 100%;
          border: none;
          background: #2585d0;
          font-size: 15px;
          height: 100%;
          border-radius: 0;
          text-align: center;
          line-height: 60px;
          span {
            color: #ffff;
          }
        }
      }
    }
  }
</style>
